<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>时钟</title>
    <style>
        body {
        }
        .page {
          width: 100%;
          height: 100%;
        }
        .time_container,
        .date_container {
          width: 100%;
          margin: auto;
          text-align: center;
        }
        .time {
          font-size: 4.6rem;
        }
        .date {
          font-size: 2.4rem;
        }
        .calendar_{
          width: 96%;
        }
        .root {
          font-size: 1.2rem;
          margin: 0;
          padding: 0;
          /*width: calc(630px + 12px);*/
          /*height: calc(630px + 10px);*/
          height: 50px;
          border: 2px solid;
        }
        .item {
          list-style: none;
          /*width: 90px;*/
          width: 14%;
          height: 50px;
          line-height: 50px;
          border-right: 2px solid;
          border-bottom: 2px solid;
          text-align: center;
          float: left;
        }
        .item:nth-child(7n){
          border-right: none;
        }
    </style>
</head>

<body style="color: #ffffff;background-color: #000000;">
  <div class="page">
    <div class="time_container">
      <div class="time" id="time">
        <span id="time_h">12</span>:<span id="time_m">34</span>.<span id="time_s">**</span>
      </div>
      <div><span style="font-size: 1rem">7-9 13-15更新秒 6-20 更新分</span></div>
    </div>
    <div class="date_container">
      <div class="date" id="date">
        <span id="day_y">1989</span>/<span id="day_m">5</span>/<span id="day_d">20</span>
        星期<span id="week_i">六</span>
      </div>
    </div>
    <div class="calendar_">
      <div><ul id="week_header" class="root"></ul></div>
      <div id="calendar_data" class="calendar_data"></div>
    </div>
    <div>
      <span id="year_rem_days" style="font-size: 1.2rem">年总天数 x,已过 x,占比 x,余 x</span>
    </div>
  </div>
<script>
  var tmp_f= tmp_h= tmp_d= tmp_m= tmp_y= tmp_w= tmp_start= tmp_m_t= -1 ,
  weekList = ['日','一','二','三','四','五','六'];
  function updateDate(date) {
    //date.setMinutes(date.getMinutes() + (date.getTimezoneOffset() + 480));
    if( (tmp_h >= 7 && tmp_h <= 9) || (tmp_h >= 13 && tmp_h <= 15) ){
      // 只有 白天 7-9、13-15 每秒刷新
      document.getElementById("time_s").innerText = ('0' + date.getSeconds()).slice(-2);
    }else if( (tmp_h == 10 || tmp_h == 16) && date.getSeconds() == 0 ){
      document.getElementById("time_s").innerText = '**';
    }

    if( date.getMinutes() == tmp_f ){ return; }
    // 分钟
    tmp_f = date.getMinutes();
    if( tmp_h >= 6 && tmp_h <= 20 ){
      // 分钟 在 白天 6-20 才每分钟刷新
      document.getElementById("time_m").innerText = ('0' + date.getMinutes()).slice(-2);
      colorInversion(date.getMinutes(),date);
    }else if( tmp_f % 15 == 0 ){
      document.getElementById("time_s").innerText = '++';
      document.getElementById("time_m").innerText = ('0' + date.getMinutes()).slice(-2);
      colorInversion(date.getMinutes(),date);
    }

    if( date.getHours() == tmp_h ){ return; }
    // 小时
    tmp_h = date.getHours();
    document.getElementById("time_h").innerText = ('0' + date.getHours()).slice(-2);

    if( date.getDate() == tmp_d ){ return; }
    // 日
    tmp_d = date.getDate();
    tmp_w = date.getDay();
    document.getElementById("day_d").innerText = date.getDate();
    // 星期
    document.getElementById("week_i").innerText = weekList[date.getDay()];
    // 计算年剩余天数
    yearRemDays(date);

    if( date.getMonth() == tmp_m ){ return; }
    // 月
    tmp_m = date.getMonth();
    document.getElementById("day_m").innerText = (date.getMonth() + 1);
    tmp_start = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
    tmp_m_t = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
    calendarDataReset(tmp_m_t,tmp_start);

    if( date.getFullYear() == tmp_y ){ return; }
    // 年
    tmp_y = date.getFullYear();
    document.getElementById("day_y").innerText = date.getFullYear();
  }
  function colorInversion(num,date) {
    // 颜色反转
    if( tmp_d != date.getDate() && tmp_d != -1 ){
      document.getElementsByClassName('li-d-'+tmp_d)[0].style.color = '';
      document.getElementsByClassName('li-d-'+tmp_d)[0].style.background = '';
      document.getElementsByClassName('li-h-'+tmp_w)[0].style.color = '';
      document.getElementsByClassName('li-h-'+tmp_w)[0].style.background = '';
    }
    if( num % 5 == 0 && num % 2 == 0 ){
      colorInversionEl(document.body,true);
    }else if( num % 5 == 0 && num % 2 == 1 ){
      colorInversionEl(document.body,false);
    }else{
      return;
    }
    var d = tmp_start + date.getDate() - 1 ;
    colorElByBody(document.getElementsByClassName('li-h-'+date.getDay())[0]);
    colorElByBody(document.getElementsByClassName('li-d-'+d)[0]);
  }
  function colorInversionEl(el,boo) {
    // 颜色反转
    el.style.color = boo ? '#ffffff' : '#000000' ;
    el.style.background = boo ? '#000000' : '#ffffff' ;
  }
  function colorElByBody(el) {
    // 颜色反转
    el.style.color = document.body.style.backgroundColor;
    el.style.background = document.body.style.color;
  }
  function calendarHeaderInit() {
    // 初始化日历头
    var li_1 = '<li class="item li-head li-h-',li_2 = '" >',close = "</li>",html_s = '';
    for (var i = 0; i < weekList.length; i++) {
      html_s += li_1 + i + li_2 + weekList[i] + close;
    }
    document.getElementById("week_header").innerHTML = html_s;
  }
  function calendarDataInit() {
    // 初始化日历内容
    var len = weekList.length;
    var li_1 = '<li class="item li-data li-d-',li_2 = '" >',close = "</li>",html_s = '';
    for (var line = 0; line < 6; line++) {
      html_s += '<div><ul class="root">';
      for (var i = 0; i < len; i++) {
        html_s += li_1 + (line * len + i) + li_2 + '-' + close;
      }
      html_s += '</ul></div>';
    }
    document.getElementById("calendar_data").innerHTML = html_s;
  }
  function calendarDataReset(days,startIndex) {
    // 日志内容重置
    var items = document.getElementsByClassName('li-data'),max = startIndex + days;
    for (var i = 0,len = items.length; i < len; i++) {
      if(i >= max || i < startIndex){
        items[i].innerHTML = '-';
      }else{
        items[i].innerHTML = i - startIndex + 1;
      }
    }
  }
  function yearRemDays(date){
    //计算年剩余天数,年结束、开始时间、每天秒数
    var end = new Date(date.getFullYear(),11,31,23,59,59),
    start = new Date(date.getFullYear()-1,11,31,23,59,59),
    dayMs = 24*60*60*1000;
    // 总天数
    var totalDay = Math.round((end.getTime()-start.getTime())/dayMs);
    // 当前天数
    var useDay = Math.round((date.getTime()-start.getTime())/dayMs);
    document.getElementById("year_rem_days").innerText 
    = '年总天数 '+totalDay+',已过 '+useDay+',占比 '+Math.round((useDay*100)/totalDay)+'%,余 '+(totalDay-useDay);

  }
  function calendarInit() {
    // 日历内容 初始化
    var date = new Date(),
    tmp_m_t = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
    tmp_start = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
    calendarHeaderInit();
    calendarDataInit();
    calendarDataReset(tmp_m_t,tmp_start);
    document.getElementById("time_m").innerText = ('0' + date.getMinutes()).slice(-2);
    colorElByBody(document.getElementsByClassName('li-h-'+date.getDay())[0]);
    colorElByBody(document.getElementsByClassName('li-d-'+(date.getDay() + date.getDate() - 1))[0]);
    yearRemDays(date);
  }
  function update() { updateDate(new Date()); }
  calendarInit();
  update();
  setInterval("update()", 1000);
</script>
</body>
</html>